<template>
    <div class="image-upload-container">
        <div class="img-show" v-if="(imageUrl && !disabled)">
            <img :src="imageUrl" class="img-input">
            <span class="actions">
                <!-- 放大 -->
                <span class="item">
                    <i class="el-icon-zoom-in" @click="onPreviewButtonClicked()"></i>
                </span>
                <!-- 删除 -->
                <span class="item">
                    <i class="el-icon-delete" @click="onDeleteButtonClicked()"></i>
                </span>
            </span>
        </div>

        <el-upload v-if="(!imageUrl && !disabled)" class="image-uploader" :action="uploadUrl" list-type="picture" :show-file-list="false"
            :on-success="onUploadSuccess" :before-upload="onBeforeUpload" :disabled="disabled">
            <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <img class="img-input" v-if="disabled" :src="imageUrl" @click="onPreviewButtonClicked()">
        <div class="tips" v-if="!disabled">{{ toolTips }}</div>

        <el-dialog :visible.sync="previewDialogVisible" append-to-body>
            <img width="100%" :src="imageUrl" alt="">
        </el-dialog>
    </div>

</template>
<script>
export default {
    name: 'ImageUpload',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: [String],
        uploadUrl: {
            type: String,
            require: true,
        },
        disabled: Boolean,
        fileTypes: {
            type: Array,
            require: false,
            default: () => ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
        },
        fileSize: {
            type: Number,
            require: false,
            default: 4 * 1024 * 1024
        },
        toolTips: [String]
    },
    watch: {
        value(val){
            this.imageUrl = val;
        }
    },
    data() {
        return {
            imageUrl: this.value,
            previewDialogVisible: false
        }
    },
    methods: {
        onInputChanged(val) {
            if (isNaN(new Number(val))) {
                this.displayValue = this.oldInputValue;
                return;
            }

            let nums = this.displayValue.split('.');
            if (nums.length > 1) {
                if (nums[1].length > 2) {
                    this.displayValue = parseFloat(this.displayValue).toFixed(2);
                }
            }
            this.oldInputValue = this.displayValue;
            this.$emit("change", (val * 100).toFixed(0));
        },
        onDeleteButtonClicked() {
            this.imageUrl = null;
            this.$emit("change", this.imageUrl);
        },
        onPreviewButtonClicked() {
            this.previewDialogVisible = true;
        },
        onBeforeUpload(file) {
            console.log(file)
            if (this.fileTypes.indexOf(file.type) === -1) {
                this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif、pdf' }))
                return false
            }

            if (this.fileSize <= file.size) {
                this.$message.error(this.$t('upload.size'));
                return false
            }

            return true;
        },
        onUploadSuccess(res, file) {
            console.log(res, file)
            this.imageUrl = res.data.src;
            this.$emit("change", this.imageUrl);
        }
    }
}
</script>
<style >
.image-upload-container .el-upload {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
    overflow: hidden;
}

.image-upload-container .el-upload:hover {
    border-color: #409EFF;
}

.image-upload-container .el-upload i {
    font-size: 28px;
    color: #8c939d;
}

.image-upload-container .img-show {
    position: relative;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    overflow: hidden;
}


.image-upload-container .img-input {
    width: 148px;
    height: 148px;
    display: block;
    cursor: pointer;
}

.image-upload-container .actions {
    position: absolute;
    width: 148px;
    height: 148px;
    line-height: 148px;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity .3s;
}

.image-upload-container .actions:hover {
    opacity: 1;
}

.image-upload-container .actions:hover span {
    display: inline-block;
}

.image-upload-container .actions span {
    display: none;
    margin: 0 16px;
    cursor: pointer;
}

.image-upload-container .tips {
    color: #909399;
    font-size: 10px;
}
</style>
